<template>
  <div class=" p-5 space-y-5">
    <div class=" space-y-3">
      <div class="font-bold text-xl">评论</div>
      <div class="flex space-x-3">
        <RemoteAvatar circle size="large"></RemoteAvatar>
        <CommentInput @comment-success="commentSuccess" :targetId="id"></CommentInput>
      </div>
    </div>
    <n-divider></n-divider>
    <div v-if="list.length" class=" space-y-3">
      <div class="font-bold text-xl">全部评论</div>
      <CommentList :list="list" :item-count="pagination.itemCount" @handleMore="handleMoreComment"></CommentList>
    </div>
  </div>
</template>

<script setup lang="ts">


import RemoteAvatar from "@/components/pc/avatar/RemoteAvatar.vue";
import CommentInput from "@/components/pc/input/CommentInput.vue";
import {onMounted, reactive, ref} from "vue";
import api from "@/api";
import CommentList from "@/components/pc/list/CommentList.vue";

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const list = ref<IComment[]>([])
const pagination = reactive(
    {
      pageSize: 3,
      pageNo: 1,
      itemCount: 0,
    })
onMounted(() => {
  getCommentList()
})
const getCommentList = () => {
  api.comment.getPostComment({
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    targetId: props.id
  }).then(res => {
    if (res.data.code === 0) {
      list.value = list.value.concat(res.data.data.records)
      pagination.itemCount = res.data.data.total
    }
  })
}
const handleMoreComment = () => {
  pagination.pageNo++
  getCommentList()
}


const commentSuccess = (item: any) => {
  list.value.unshift(item)
}
</script>

<style scoped>

</style>